<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Beetl3  脚本运行和调试--闲大赋</title>
    <style type="text/css">
    <!--
    .STYLE1 {color: #FF0000}
    .highlight-line {
        background-color: yellow;
        /* 将背景色设置为黄色来实现高亮 */
        }
    -->

    </style>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/javascript/javascript.min.js"></script>




    <script>
    $(function(){
        var inputEditor = CodeMirror.fromTextArea(document.getElementById('input'), {
          lineNumbers: true, // 显示行号
          mode: "javascript", // 设置编辑语言模式
        });

        var jsonEditor = CodeMirror.fromTextArea(document.getElementById('json'), {
          lineNumbers: true, // 显示行号
          mode: "javascript", // 设置编辑语言模式
        });
        var lastDebugLine=null ;
        var lastBreakLine = -1;

        inputEditor.setSize('auto','200px');
        jsonEditor.setSize('auto','100px');
        $("#submit").click(function(){
           validateForm();
           lastDebugLine=lastDebugLine==null?-1:lastDebugLine;
           lastBreakLine=-1;
           inputEditor.removeLineClass(lastDebugLine,"background");
           lastDebugLine=-1;
           $.post("debug/run",
            {
                input:inputEditor.getValue(),
                json:jsonEditor.getValue()
            },
            function(data,status){
                handleData(data,status);
            });
        });

         $("#run").click(function(){
           validateForm();
           $.post("debug/runScript",
            {
                input:inputEditor.getValue(),
                json:jsonEditor.getValue()
            },
            function(data,status){
                handleData(data,status);
            });
        });

        $("#submitStepOneLine").click(function(){
           validateForm();
           $.post("debug/stepOneLine",
            {

            },
            function(data,status){
               handleData(data,status);
            });
        });

        $("#submitStepToFinish").click(function(){
           validateForm();
           $.post("debug/stepToFinish",
            {
            },
            function(data,status){
               handleData(data,status);
            });
        });

        $("#submitSetBreakline").click(function(){
           validateForm();
           var line =$("#debugLine").val()
           $.post("debug/setBreakline",
            {
             "line":line,
            },
            function(data,status){
               handleData(data,status);
               if(lastBreakLine!=-1){
                $(".CodeMirror-linenumber").eq(lastBreakLine-1).html(lastBreakLine);
               }
               lastBreakLine = line;
               $(".CodeMirror-linenumber").eq(lastBreakLine-1).html("*"+lastBreakLine);
            });
        });

         $("#submitStepToBreak").click(function(){
           validateForm();
           $.post("debug/stepToBreak",
            {
            },
            function(data,status){
                handleData(data,status);
            });
        });

         $("#validate").click(function(){
               validateForm();
               $.post("debug/validate",
                {
                 input:inputEditor.getValue()
                },
                function(data,status){
                    handleData(data,status);
                });
           });

        function handleData(data,status){
              $("#console").val(data.console)
              inputEditor.removeLineClass(lastDebugLine,"background");
              if(data.debug.line!=null){
                lastDebugLine = data.debug.line-1;
              }else{
                lastDebugLine =-1;
              }


              inputEditor.addLineClass(lastDebugLine, "background", "highlight-line");
              if(lastDebugLine!=-1){
                var newstr = JSON.stringify(data.debug);
                $("#debug").val(newstr)
              }

        }
        function validateForm(){
            var input = getContent("input");
            if(input.length>500){
                alert("脚本输出内容太长");
                return false ;
            }

            var json = getContent("json");
            if(json.length>100){
                alert("变量内容太长");
                return false ;
            }
        }

        function getContent(id){
	        return document.getElementById(id).value;
        }

        inputEditor.setValue("var a=1;\n"
                            +"var b=2+c.age;\n"
                            +"for(id in c.wife){\n"
                            +"	b=b+id;\n"
                            +"}\n"
                            +"return a+b;");
        jsonEditor.setValue("var c={\"age\":10,\"name\":\"lijz\",\"wife\":@java.util.Arrays.asList(1,2,3)};");

    });



</script>

</head>

<body>
<form>
    <table width="100%">
        <tr>
            <td valign="top">&nbsp;</td>
            <td><h2>Beetl3 脚本引擎在线调试（试运行）</h2></td>
        </tr>


        <tr>
            <td width="11%" valign="top">
                <div align="left">脚本<span class="STYLE1">*</span></div>
            </td>
            <td width="89%"><label>
                <textarea name="input" id="input" cols="100" rows="8"></textarea>
            </label></td>
        </tr>
        <tr>
            <td valign="top">
                <div align="left">脚本的参数</div>
            </td>
            <td><textarea name="json" id="json" cols="100" rows="3"></textarea></td>
        </tr>

        <tr>
            <td valign="top">
                <div align="left">debug信息</div>
            </td>
            <td><textarea name="debug" id="debug" cols="100" rows="4"></textarea></td>
        </tr>
        <tr>
            <td valign="top">
                <div align="left">消息控制台</div>
            </td>
            <td><textarea name="console" id="console" cols="100" rows="4"></textarea></td>
        </tr>


        <tr>
            <td>&nbsp;</td>
            <td><label>
                <input type="button" id="run" name="run" value="运行"/>
                <input type="button" name="validate" id="validate" value="校验脚本"/>
                ||
                <input type="button" id="submit" name="submit" value="开始Debug"/>
                <input type="button" id="submitStepOneLine" name="submitStepOneLine" value="下一行"/>
                <input type="button" id="submitStepToFinish" name="submitStepToFinish" value="运行到结束"/>
                <input type="button" id="submitStepToBreak" name="submitStepToBreak" value="运行到下一个断点"/>

            </label></td>
        </tr>
        <tr>
            <td valign="top">
                <div align="left">设置断点行</div>
            </td>
            <td><input name="debugLine" id="debugLine"></input>
                <input type="button" id="submitSetBreakline" name="submitSetBreakline" value="保存断点"/></td>
        </tr>
        <tr>
            <td>帮助：</td>
            <td>
                <ul>
                    <li>Gitee:https://gitee.com/xiandafu/beetl</li>
                    <li>循环语句重写，同模板在线体验一样，只允许循环5次</li>
                    <li>有任何问题，请发送邮件xiandafu@126.com</li>
                    <li><a target="_blank" href="https://www.kancloud.cn/xiandafu/beetl3_guide/1992542">了解什么是Beetl脚本引擎</a>
                </ul>
                <p></p></td>

        </tr>
    </table>
</form>


</body>
</html>
